<template>
<div class="wrapper" :style="`background-image: url(${Domain}/static/biaoQian/${bgIndex}.png);`" :class="colorWhite?'colorWhite':''">
  <div class="contentWrapper " :class="bgBorderType===1?'itemWrapper_1':bgBorderType===2?'itemWrapper_2':''" v-for="(item1,index1) in dataList" :key="index1">
    <div class="title">编号：{{item1.Code}}&nbsp{{item1.Name}}</div>
    <div class="content flex" >
      <ul class="flex" >
        <li class="  relt" v-for="(item2,index2) in item1.childs" :key="index2" :class="colorWhite?'colorWhite':''">
          <label class="flex  f-zhong"   @click.stop="doselect(item2,index1,item1,index2)"  :class="[item2.isSC?'showLight':'']">
            <!--<input @click.stop  :checked="item2.isSC" :type="item1.sModel=='单选'?'radio':'checkbox'" :name="item1.SN">-->
          <span v-if="item2.oS" v-text="item2.showDetail?' ㊀':'㊉'"></span> <span>{{item2.Name}}</span> </label>
          <div class="contentChild" v-if="item2.showDetail&&item2.oS">
            <ul class="flex" v-for="(List2item,List2index) in item2.oS" :key="List2index" v-if="item2.oS">
              <li v-if="List2item" class="" v-for="(List3item,List3index) in List2item.childs" :key="List3index">
                <label class="flex  f-zhong" @click.stop="doselect2(item1,index1,item2,index2,List3item,List3index)" :class="List3item.isSC?'showLight':''">
                  <!--<input :checked="List3item.isSC" @click.stop :type="item2.oS[0].sModel=='单选'?'radio':'checkbox'" :name="item2.SN" > -->
                  <span>{{List3item.Name}}</span></label>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="f-zhong"><button class="btn" @click="do_submit">提交</button> </div>
  <div style="color: white" id="foot">
    <!--背景选择-->
    <ul class="flex " id="ul">
      <li class="flex1 f-zhong " v-for="(item,index) in biaoQian" :key="index" @click="chooseBg(index)"><div  :style="bgChoose(index)" :class="bgIndex==index+1?'borderWhite':''"></div></li>
      <li class="flex1 f-zhong"   id="bai" @click="chooseBg(7)" ><div :class="bgIndex==8?'borderWhite':''"></div></li>
    </ul>
  </div>
  <div class="toast" v-show="toastShow">
    已提交！
  </div>
</div>
</template>

<script>
    export default {
      name: "biaoQianTest",
      data() {
        return {
          toastShow:false,
          bgBorderType: 0,
          bgIndex: '8',
          Domain: this.$ZcPublic.Domain,
          colorWhite: false,
          biaoQian: [1, 2, 3, 4, 5, 6, 7],
          dataList: [{
            "SN": "8A59D521-D57D-4AF5-9AB7-76143C2E6122",
            "Code": "01",
            "Name": "车型",
            "sModel": "单选",
            "childs": [{
              "id": null,
              "Code": "1",
              "Name": "别克",
              "SN": "E4A05F87-0839-4277-878E-31663F76C0AE",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": [{
                "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
                "Code": "1",
                "Name": "购车时段分类",
                "sModel": "多选",
                "childs": [{
                  "id": null,
                  "Code": "1",
                  "Name": "别克11",
                  "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "2",
                  "Name": "别克22",
                  "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "3",
                  "Name": "别克33",
                  "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }]
              }],
              "childs": null
            }, {
              "id": null,
              "Code": "2",
              "Name": "大众",
              "SN": "D42AA792-E34A-473A-BBE2-1B84BD14F3D7",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": [{
                "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
                "Code": "1",
                "Name": "购车时段分类",
                "sModel": "单选",
                "childs": [{
                  "id": null,
                  "Code": "1",
                  "Name": "大众11",
                  "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "2",
                  "Name": "大众22",
                  "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "3",
                  "Name": "大众33",
                  "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }]
              }],
              "childs": null
            }, {
              "id": null,
              "Code": "3",
              "Name": "宝马",
              "SN": "94A84E35-41FC-4D72-AE36-195CBAC423B5",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "4",
              "Name": "奥迪",
              "SN": "94A84E35-41FC-4D72-AE36-195CBAC423B5",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }]
          }, {
            "SN": "15FC9087-4E1B-415C-960E-958634C97F08",
            "Code": "02",
            "Name": "爱好",
            "sModel": "多选",
            "childs": [{
              "id": null,
              "Code": "1",
              "Name": "旅浒",
              "SN": "08221932-2DED-4C2E-9ED7-5C3A74BE5529",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": [{
                "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
                "Code": "1",
                "Name": "购车时段分类",
                "sModel": "单选",
                "childs": [{
                  "id": null,
                  "Code": "1",
                  "Name": "旅浒11",
                  "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "2",
                  "Name": "旅浒22",
                  "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "3",
                  "Name": "旅浒33",
                  "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }]
              }],
              "childs": null
            }, {
              "id": null,
              "Code": "2",
              "Name": "游泳",
              "SN": "2D6BAE46-5455-42E2-9DB5-B0B40161E0C4",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": [{
                "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
                "Code": "1",
                "Name": "购车时段分类",
                "sModel": "单选",
                "childs": [{
                  "id": null,
                  "Code": "1",
                  "Name": "游泳11",
                  "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "2",
                  "Name": "游泳22",
                  "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "3",
                  "Name": "游泳33",
                  "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }]
              }],
              "childs": null
            }, {
              "id": null,
              "Code": "3",
              "Name": "打球",
              "SN": "BB7B971E-44A3-4E09-9CA2-AB5A234D8058",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": [{
                "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
                "Code": "1",
                "Name": "购车时段分类",
                "sModel": "单选",
                "childs": [{
                  "id": null,
                  "Code": "1",
                  "Name": "游泳11",
                  "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "2",
                  "Name": "游泳22",
                  "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "3",
                  "Name": "游泳33",
                  "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }]
              }],
              "childs": null
            }]
          }, {
            "SN": "DF440209-11B0-45CA-A020-20E821C7507C",
            "Code": "03",
            "Name": "购车意向",
            "sModel": "单选",
            "childs": [{
              "id": null,
              "Code": "1",
              "Name": "最近无购车计划",
              "SN": "D8428D79-FFB0-40DE-9031-2DFB008C03A2",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "2",
              "Name": "最近有购车计划",
              "SN": "A2969198-A51C-4774-A358-CFE061D4C68F",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": [{
                "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
                "Code": "1",
                "Name": "购车时段分类",
                "sModel": "单选",
                "childs": [{
                  "id": null,
                  "Code": "1",
                  "Name": "计划1月内购车",
                  "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "2",
                  "Name": "计划半年内购车",
                  "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "3",
                  "Name": "计划1年内购车",
                  "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }]
              }],
              "childs": null
            }]
          },
            {
              "SN": "DF440209-11B0-45CA-A020-20E821C7507C",
              "Code": "04",
              "Name": "买房",
              "sModel": "单选",
              "childs": [{
                "id": null,
                "Code": "1",
                "Name": "最近无买房计划",
                "SN": "D8428D79-FFB0-40DE-9031-2DFB008C03A2",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "2",
                "Name": "最近有买房计划",
                "SN": "A2969198-A51C-4774-A358-CFE061D4C68F",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": [{
                  "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
                  "Code": "1",
                  "Name": "买房时段分类",
                  "sModel": "单选",
                  "childs": [{
                    "id": null,
                    "Code": "1",
                    "Name": "1月内买房",
                    "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                    "isS": false,
                    "IsEnd": false,
                    "isSC": false,
                    "oS": null,
                    "childs": null
                  }, {
                    "id": null,
                    "Code": "2",
                    "Name": "计划半年内买房",
                    "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                    "isS": false,
                    "IsEnd": false,
                    "isSC": false,
                    "oS": null,
                    "childs": null
                  }, {
                    "id": null,
                    "Code": "3",
                    "Name": "计划1年内购卖方",
                    "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                    "isS": false,
                    "IsEnd": false,
                    "isSC": false,
                    "oS": null,
                    "childs": null
                  }]
                }],
                "childs": null
              }]
            }],
        }
      },
      mounted() {
        // this.arrSelect=["L-01-1-1", "L-01-1-2", "L-02-3", "L-03-2-2", "L-04-1"];
        this.$nextTick(() => {
          this.dataList.forEach((item, index) => {
            item.childs.forEach((item2, index2) => {
              this.$set(item2, "showDetail", false)
              // this.$set(item2, "showLight", false)
            })
          })
          console.log("this.dataList.", this.dataList)
          if (sessionStorage.getItem("bgIndex")) {
            this.bgIndex = sessionStorage.getItem("bgIndex")
            this.chooseBg(this.bgIndex - 1)
          }
          if (localStorage.getItem('snList')) {
            this.arrSelect = JSON.parse(localStorage.getItem('snList'))
            // this.SNList = this.arrSelect
          }
          console.log("改后data", this.dataList)
          if (this.arrSelect) {
            try {

              this.arrSelect.forEach((item, index) => {
                let snL = item.split("-")
                this.dataList.forEach((item2, index2) => {
                  if (snL[1] - 1 == index2) {
                    item2.childs.forEach((item3, index3) => {
                      if (snL[2] == item3.Code) {
                        // item3.showDetail = true;
                        item3.isSC = true;
                        if (snL[3]) {
                          if (item3.oS) {
                            item3.oS[0].childs.forEach((item4, index4) => {
                              if (snL[3] == item4.Code) {
                                item4.isSC = true;
                              }
                            })
                          }
                        }
                      }
                    })
                  }
                })
              })
              console.log("改后data22", this.dataList)
            } catch (e) {
              // alert(e)
            }
          }
        })


      },
      methods: {
        chooseBg(index) {
          sessionStorage.setItem("bgIndex", index + 1)
          switch (index) {
            case 7:
              // this.$router.push('biaoqian')
              this.colorWhite = false
              this.bgBorderType = 0
              this.bgIndex = index + 1
              break;
            case 0:
            case 4:
            case 5:
            case 6:
              this.colorWhite = true
              this.bgIndex = index + 1
              this.bgBorderType = 1
              break;
            case 1:
            case 2:
            case 3:
              this.colorWhite = true
              this.bgBorderType = 2
              this.bgIndex = index + 1
              break;
          }

        },
        bgChoose(index) {
          return "background-image: url(" + this.$ZcPublic.Domain + "/static/biaoQian/" + (index + 1) + ".png);"
        },
        doselect(item2, index1, item1, index2) {
          //item1,index1为最外层数据信息，item2,index2为第一轮大数据展示
          this.$nextTick(() => {
            item2.showDetail = !item2.showDetail
            // alert(item2.showDetail)
            item2.isSC = !item2.isSC
            for (let i = 0; i < item1.childs.length; i++) {
              //循环第二轮数据如果点击左边就隐藏右边详情展示，如果点击右边隐藏左边详情展示
              if (i == index2) {
                if (index2 % 2 == 1) {
                  item1.childs[i - 1].showDetail = false
                } else {
                  if (item1.childs[i + 1]) {
                    item1.childs[i + 1].showDetail = false
                  }
                }
              }
              //循环第二轮数据查找第三级有选中则第二级变成选中
              // if (item1.childs[i].isSC) {

              let item2_isSC = false
              if (item1.childs[i].oS != null) {
                // alert("null11")
                console.log("item1.childs[i].oS", item1.childs[i].oS[0])
                item1.childs[i].oS[0].childs.forEach((item12, index12) => {
                  if (item12.isSC) {//如果第三级有选中情况
                    item2_isSC = true
                  }
                })
                if (item2_isSC) {
                  item1.childs[i].isSC = true
                } else {
                  item1.childs[i].isSC = false
                }
              }
              // }
            }
            if (item1.sModel == "单选") {
              console.log('itemF.childs!', item1.childs)
              if (item2.isSC) {
                item1.childs.forEach((itemF2, indexF2) => {
                  if (itemF2.isSC) {
                    if (indexF2 != index2) {
                      itemF2.isSC = false
                      if (itemF2.oS != null) {
                        itemF2.oS[0].childs.forEach((item3_f) => {
                          item3_f.isSC = false
                        })
                      }
                    }
                  }
                })
              }
            }
            console.log(item1)
          })
        },
        doselect2(item1, index1, item2, index2, item3, index3) {
          //item1,index1为最外层数据，item2,index2为第二层，item3，index3为最末端数据
          this.$nextTick(() => {
            item3.isSC = !item3.isSC
            if (item2.oS[0].sModel == "单选") {//单选如果当前是选中，更改其他为没选中
              item2.oS[0].childs.forEach((itemF2, indexF2) => {
                if (itemF2.isSC) {
                  if (indexF2 != index3) {
                    itemF2.isSC = false
                  }
                }
              })
            }
            console.log(item2)
            let itemF3isSC = false
            //如果item3有被选中 item2比被选中，item2下面没有被选中item2变成不选中，
            item2.oS[0].childs.forEach((itemF3, indexF3) => {//循环第二级下面的内容
              if (itemF3.isSC) {
                itemF3isSC = true
                console.log('item2.isSC', item2)
                console.log('item2.isSC', item2.isSC)
                if (item1.sModel == "单选") {
                  item1.childs.forEach((itemF4, indexF4) => {//循环第一级下面的内容,如果本条选中其余变成不选中
                    if (itemF4.isSC) {
                      if (indexF4 != index2) {

                        itemF4.isSC = false
                        if (itemF4.oS != null) {
                          itemF4.oS[0].childs.forEach((itemF4_1, indexF4_1) => {//其余变成不选中下级的也变为不选中
                            itemF4_1.isSC = false
                          })
                        }
                      }
                    }
                  })
                }
              }
              if (itemF3isSC) {//如果末级有选中控制上级
                item2.isSC = true
              } else {
                item2.isSC = false
              }
            })
          })
        },
        do_submit() {
          console.log(this.dataList)
          let snList = []
          this.dataList.forEach((item1) => {
            item1.childs.forEach((item2) => {
              if (item2.isSC) {
                if (item2.oS == null) {//第一级没有子集的加入数组
                  let sn = 'L-' + item1.Code + '-' + item2.Code
                  snList.push(sn)
                } else {
                  item2.oS[0].childs.forEach((item3) => {//第一级有子集的吧子集的塞选出来加入数组
                    if (item3.isSC) {
                      let sn = 'L-' + item1.Code + '-' + item2.Code + '-' + item3.Code
                      snList.push(sn)
                    }
                  })
                }
              }
            })
          })
          console.log(snList)
          localStorage.setItem('snList', JSON.stringify(snList))
          this.toastShow=true
          let me = this
          setTimeout(() => {
            me.toastShow = false
          }, 1000)
          this.$router.go(0)
        }
      }
    }
</script>

<style scoped>
  /*自定义*/
  .f,.f-zhong,.f-bian,.f-tb,.flex{
    display: flex;
  }
  .f-zhong,.f-bian,.f-tb,.itemCenter{
    align-items: center;
  }
  .f-bian{
    justify-content: space-between;
  }
  .f-zhong,.f-tb{
    justify-content: center;
  }
  .f-tb{
    flex-direction: column;
  }
  .flexWrap{
    flex-wrap:wrap
  }
  .flex1{
    flex: 1;
  }

  .contentWrapper{
margin: 20px 10px 0 10px;
    border: 1px solid gainsboro;
    border-radius: 5px;
padding: 0 10px 0 10px;
  }
  .contentWrapper .title{
    height: 50px;
    line-height: 50px;
    font-weight: 500;
    border-bottom: 1px solid gainsboro;
    margin-bottom: 10px;
  }
  .content ul{
    flex-wrap: wrap;
    width: 100%;

  }
.content ul li{
  width: 49.9%;
}
  .content ul li label{
    width: 80%;
    border: 1px solid #999999;
    height: 45px;
    /*line-height: 50px;*/
    text-align: center;
    line-height: 24px;
    margin-bottom: 15px;
    border-radius: 5px;
    margin-left: 10%;
    position: relative;
    z-index: 100;
    color: grey;
    font-size: 14px;
  }
  .contentChild{
    width: 180%;
  margin-left: 10%;
    margin-bottom: 10px;
    padding: 10px;
    /*border: 1px solid ;*/
    background-color: #dddde4;
    position: relative;
    border-radius: 5px;
    padding-bottom: 0;
  }
  .contentChild ul li label{
    font-size: 12px;
  }
  .contentChild:after{
    content: '';
    position: absolute;
    border-style:solid;
    border-width:12px 12px 12px;
    border-color: transparent  transparent #dddde4 transparent ;/*灰 透明 透明 */
    top: -24px;
    left: 19%;
  }
  .content>ul>li:nth-of-type(2n)>.contentChild{
    margin-left: -90%;
  }
  .content>ul>li:nth-of-type(2n)>.contentChild:after{
    content: '';
    position: absolute;
    border-style:solid;
    border-width:12px 12px 12px;
    border-color: transparent  transparent #dddde4 transparent ;/*灰 透明 透明 */
    top: -24px;
    left: 73%;
  }

  .btn{
    width: 100px;
    height: 50px;
    border-radius: 5px;
    background-color: #5ECFB7;
    color: white;
    margin: 20px 0;
    font-size: 20px;
  }
  #ul li{
    width: 40px ;
    height: 60px;
  }
  #ul li div{
    width:35px ;
    height: 50px;
    border: 1px solid black;
    /*background-image: url("../../static/biaoQian/1.jpg");*/
    background-size: 100%;
  }
  #bai>div {
    background-image: none;
    background-color: white;
  }
  .borderWhite{
    border:1px solid red;
  }
  #foot{
    position: fixed;
    width: 100%;
    /*border: 1px solid  red;*/
    height: 60px;
    bottom: 0;
    background-color: white;
    z-index: 999;
  }
  .wrapper{
    padding-bottom: 70px;
    background-size: 100% 100%;
    overflow: hidden;
  }
  .colorWhite,  .colorWhite label{
    color: white !important;
  }

  .colorWhite .contentChild{
    background-color: red ;
  }
  .colorWhite label{
    border: 1px solid #c0c0c0 !important;
  }
  .itemWrapper_1{
    box-shadow: 0px 0px 10px 1px;
    border: 1px solid rgba(105, 93, 119, 0.46);
    background-color: rgba(255, 255, 255, 0.19);
    box-sizing: border-box;
  }
  .itemWrapper_2{
    box-shadow: 0px 0px 10px 1px;
    border: 1px solid rgba(105, 93, 119, 0.46);
    background-color: rgba(0, 0, 0, 0.19);
    box-sizing: border-box;
  }
  .colorWhite .contentChild{
    background-color: rgba(255,255,255,.35) !important;
  }
  .colorWhite .contentChild:after{
    border-color: transparent  transparent rgba(255,255,255,.35) transparent !important;/*灰 透明 透明 */
  }
  .content>ul>li>.showLight,  .contentChild>ul>li>.showLight{
    color: red !important;
    border: 1px solid red !important;
  }
.colorWhite .btn{

  background-color:rgba(0,0,0,.3) ;
  color: white;
  border: 1px solid #5ECFB7;
}
  .borderWhite{
    border: 1px solid red !important;
  }
  .toast{
    padding: 0 0 0 16px;
    width: 150px;
    height: 60px;
    background-color: #383838;
    color: white;
    border-radius: 7px;
    position: fixed;
    bottom: 55%;
    left: 50%;
    text-align: center;
    margin-left: -70px;
    line-height: 60px;
    font-size:18px !important;
    z-index: 999;

  }
  .colorWhite .toast{
    /*background-color: rgb(49, 49, 49);*/
    background-color: white;
    color: black;
  }
</style>
